<template>
    <div class="layout">
        <!-- 顶部标签 -->
        <app-header class="head">
            <template v-slot:head-title>
                <span>成就</span>
            </template>
        </app-header>

        <!-- 主要内容 -->
        <div class="main">
            <div class="new">
                <div class="title">最新上架</div>
                <div class="tap">
                    <ul>
                        <li>
                            <div></div>
                            <span>Just a Phrase by POWGI</span>
                        </li>
                        <li>
                            <div></div>
                            <span>Horatio Goes Snowboarding</span>
                        </li>
                        <li>
                            <div></div>
                            <span>Gardener's Path</span>
                        </li>
                        <li>
                            <div></div>
                            <span>Lacuna - A Sci-Fi Noir Adventure</span>
                        </li>
                    </ul>
                </div>
                <div class="news">
                    <div>
                        <img src="../assets/user/personal.png" alt="">
                    </div>
                    <span>JokerTreacy刚才同步了《2042》</span>
                </div>
            </div>
            <div class="hot">
                <div class="title">一周热门</div>
                <div class="tap">
                    <ul>
                        <li>
                            <div></div>
                            <span>太空军阀器官交易模拟器</span>
                        </li>
                        <li>
                            <div></div>
                            <span>湖</span>
                        </li>
                        <li>
                            <div></div>
                            <span>龙珠Z 卡卡罗特</span>
                        </li>
                        <li>
                            <div></div>
                            <span>瘟疫传说:无罪</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 底部标签 -->
        <footer>
            <div class="foot">
                <p>我的底线就到这了哇~</p>
            </div>
        </footer>
    </div>
</template>

<script>
import appHeader from '@/components/app-header.vue'

export default {
    name: "Achievement",
    components: {
        appHeader,
    }
}
</script>

<style lang="scss" scoped>
.layout {
    width: 100%;
    overflow: hidden;
    background-color: #2E2E2E;
    .main {
        width: 100%;
        margin-top: 80px;
        .new {
            width: 100%;
            background-color: #171717;
            .title {
                width: 100%;
                padding-left: 15px;
                padding-top: 20px;
                box-sizing: border-box;
                font-size: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: white;
            }
            .tap {
                width: 100%;
                padding: 0 15px;
                box-sizing: border-box;
                ul {
                    width: 100%;
                    height: 200px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    li {
                        width: 22%;
                        height: 150px;
                        // background-color: #111;
                        div {
                            width: 100%;
                            height: 120px;
                            border-radius: 10px;
                            background-size: cover;
                            background-position: center;
                        }
                        span {
                            width: 100%;
                            height: 50px;
                            text-align: center;
                            display: block;
                            font-size: 15px;
                            color: #ccc;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            padding-top: 10px;
                        }
                        &:nth-child(1) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.2731.14348872143113339.1513660b-7996-49d8-a504-aa2e14993bed.a284c098-5a8c-49aa-850e-5eb80d330a8e?w=200&h=300&format=jpg");
                        }
                        &:nth-child(2) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.4183.14184139428430352.9d3f5bd6-cccf-437c-958d-4523b919e22b.ea0fed7f-70e3-49de-971d-516e17a2fd4d?w=200&h=300&format=jpg");
                        }
                        &:nth-child(3) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.31720.13761767057175200.7e9afabf-c060-4ee7-aa56-ac601ad21d9d.55af3fa4-81e6-427e-9e4c-c1350237c78a?w=200&h=300&format=jpg");
                        }
                        &:nth-child(4) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.25193.13892821321512967.ff2febc2-f92e-4727-a3c9-56d1f5526e21.2e208dd5-db08-4de4-91c5-6b12bec31a14?w=200&h=300&format=jpg");
                        }
                    }
                }
            }
            .news {
                height: 50px;
                padding: 0 15px;
                box-sizing: border-box;
                background-color: black;
                display: flex;
                align-items: center;
                div {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 5px;
                    }
                }
                span {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    color: white;
                }
            }
        }
        .hot {
            background-color: #2E2E2E;
            .title {
                padding-left: 15px;
                padding-top: 20px;
                font-size: 20px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: white;
            }
            .tap {
                width: 100%;
                padding: 0 15px;
                box-sizing: border-box;
                ul {
                    width: 100%;
                    height: 200px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    li {
                        width: 22%;
                        height: 150px;
                        // background-color: #111;
                        div {
                            width: 100%;
                            height: 120px;
                            border-radius: 10px;
                            background-size: cover;
                            background-position: center;
                        }
                        span {
                            text-align: center;
                            display: block;
                            color: #ccc;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            padding-top: 10px;
                        }
                        &:nth-child(1) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.34290.14396653708129733.be3550ae-ecb9-49ec-9472-c70a3c588ca1.cc5e2480-f397-4750-b913-97633939d111?w=200&h=300&format=jpg");
                            
                        }
                        &:nth-child(2) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.50527.14038361809481235.9a0df6b5-00e6-4f99-877c-ac56a7af8123.14e68066-65b2-4ea0-b990-80a97105ddb0?w=200&h=300&format=jpg");
                        }
                        &:nth-child(3) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.16517.70698037221387097.3b2c0f5d-eb4e-4cd8-8075-77e281650e1e.894282d4-db9a-4cb5-9849-a1acbd2f6364?w=200&h=300&format=jpg");
                        }
                        &:nth-child(4) div{
                            background-image: url("https://store-images.s-microsoft.com/image/apps.14356.68306748966338141.e6f96fac-aa67-4f59-9043-10654607aa79.aa73acc4-f944-4ab1-83c3-265506b1529d?w=200&h=300&format=jpg");
                        }
                    }
                }
            }
        }
    }
    footer {
        width: 100%;
        height: 240px;
        padding-top: 110px;
        box-sizing: border-box;
        .foot {
            height: 50px;
            line-height: 50px;
            background-color: black;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: baseline;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
</style>
